<template>
	<view class="wrap">
		<view class="topTit">
			<view class="selectTit">请选择领域</view>
			<view class="smTips">请选择您感兴趣的领域,以便为您推荐更精确的服务</view>
		</view>
		<view class="fieldsItemWrap padd">
			<view class="fieldsItem jgttBg" :class="[currIndex == 0 ? 'active' : '']" @tap="selectCurrFields(0,'机关')">
				<view class="fieldsTit">机关</view>
				<view class="fieldsCon">为职员提供诊断、评估、培训、咨询</view>
				<view class="fieldsCon">与专业指导</view>
				<image class="fieldsImg" src="../../../static/images/fields/jgtt.png"></image>
			</view>
			<view class="fieldsItem qyBg" :class="[currIndex == 1 ? 'active' : '']" @tap="selectCurrFields(1,'企业')"> 
				<view class="fieldsTit">企业</view>
				<view class="fieldsCon">帮助企业发现问题、解决问题、引到</view>
				<view class="fieldsCon">问题、把握需求</view>
				<image class="fieldsImg" src="../../../static/images/fields/qy.png"></image>
			</view>
			<view class="fieldsItem schBg" :class="[currIndex == 2 ? 'active' : '']" @tap="selectCurrFields(2,'学校')">
				<view class="fieldsTit">学校</view>
				<view class="fieldsCon">服务于学校管理、教学改革、教职工</view>
				<view class="fieldsCon">学生及家长</view>
				<image class="fieldsImg" src="../../../static/images/fields/school.png"></image>
			</view>
			<view class="fieldsItem shBg" :class="[currIndex == 3 ? 'active' : '']" @tap="selectCurrFields(3,'社区')">
				<view class="fieldsTit">社区</view>
				<view class="fieldsCon">培育心理健康意识,普及心理知识</view> 
				<view class="fieldsCon" style="opacity: 0;">推广心理健康</view>
				<image class="fieldsImg" src="../../../static/images/fields/sh.png"></image>
			</view>
			<view class="fieldsItem jtBg" :class="[currIndex == 4 ? 'active' : '']" @tap="selectCurrFields(4,'家庭')">
				<view class="fieldsTit">家庭</view>
				<view class="fieldsCon">为家庭及其成员提供诊断、评估、培训、</view> 
				<view class="fieldsCon">咨询与专业指导</view>
				<image class="fieldsImg" src="../../../static/images/fields/jiating.png"></image>
			</view>
			<view class="fieldsItem zxBg" :class="[currIndex == 5 ? 'active' : '']" @tap="selectCurrFields(5,'特殊人群')">
				<view class="fieldsTit">特殊人群</view>
				<view class="fieldsCon">面对尚未发现的和未来个性群体的需求</view> 
				<view class="fieldsCon">提供更具针对性的服务</view>
				<image class="fieldsImg" src="../../../static/images/fields/zhuanxiang.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				currIndex:-1,
				//currFields:''
			}
		},
		onShow(){
			if(uni.getStorageSync('sysRange')){
				var sysRange = uni.getStorageSync('sysRange');
				if(sysRange == '机关'){
					this.currIndex = 0;
				}else if(sysRange == '企业'){
					this.currIndex = 1;
				}else if(sysRange == '学校'){
					this.currIndex = 2;
				}else if(sysRange == '社区'){
					this.currIndex = 3;
				}else if(sysRange == '家庭'){
					this.currIndex = 4;
				}else if(sysRange == '特殊人群'){
					this.currIndex = 5;
				}
			}
		},
		methods:{
			selectCurrFields(index,currFields){
				this.currIndex = index;
				//this.currFields = currFields;
				uni.setStorageSync('sysRange',currFields);
				uni.navigateBack({
					delta:1
				})
				uni.$emit('changeFields');
			}
		}
	}
</script>

<style lang='scss' scoped>
	.fieldsItem{
		padding: 30rpx;
		border-radius: 20rpx;
		position: relative;
		font-size: $font-size26;
		margin-bottom: 30rpx;
		.fieldsTit{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom:10rpx;
		}
		.fieldsImg{
			width: 156rpx;
			height: 120rpx;
			position: absolute;
			right: 30rpx;
			top: 35rpx;
		}
		&.jgttBg{
			color: #cb4bc7;
			background: rgba(203,75,199,.1);
			&.active{
				background: #cb4bc7;
				color: #fff;
			}
		}
		&.qyBg{
			color: #ff866d;
			background: rgba(255,134,109,.1);
			&.active{
				background: #ff866d;
				color: #fff;
			}
		}
		&.schBg{
			color: #00c495;
			background: rgba(0,196,149,.1);
			&.active{
				color: #fff;
				background: #00c495;
			}
		}
		&.shBg{
			color: #ffa60f;
			background: rgba(255,166,15,.1);
			&.active{
				color: #fff;
				background: #ffa60f;
			}
		}
		&.jtBg{
			color: #f12918;
			background: rgba(241,41,24,.1);
			&.active{
				color: #fff;
				background: #f12918;
			}
		}
		&.zxBg{
			color: #0f69ff;
			background: rgba(15,105,255,.1);
			&.active{
				color: #fff;
				background: #0f69ff;
			}
		}
	}
	.topTit{
		margin:50rpx 0 80rpx 0;
		padding-left: 30rpx;
		color: $pss-text-colora;
		font-size: $font-size26;
		.selectTit{
			font-size:38rpx;
			color: $pss-text-color3;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
	}
	.wrap{
		padding-bottom: 50rpx;
	}
</style>